import React from 'react';
import img1 from './img1.jpeg';
import img2 from './img2.png';
import LazyLoad from 'react-lazyload';
import { MyLazyLoad } from './MyLazyLoad';

const LazyComWrap = React.lazy(() => import('./LazyComp'))
export default function TestReactLazy() {
  return (
    <div>
      <p>xxxxxx</p>
      <p>xxxxxx</p>
      <p>xxxxxx</p>
      <p>xxxxxx</p>
      <p>xxxxxx</p>
      <p>xxxxxx</p>
      <p>xxxxxx</p>
      <p>xxxxxx</p>
      <p>xxxxxx</p>
      <p>xxxxxx</p>
      <p>xxxxxx</p>
      <p>xxxxxx</p>
      <p>xxxxxx</p>
      <p>xxxxxx</p>
      <p>xxxxxx</p>
      <p>xxxxxx</p>
      <p>xxxxxx</p>
      <p>xxxxxx</p>
      <p>xxxxxx</p>
      <p>xxxxxx</p>
      <p>xxxxxx</p>
      <p>xxxxxx</p>
      <p>xxxxxx</p>
      <p>xxxxxx</p>
      <p>xxxxxx</p>
      <p>xxxxxx</p>
      <p>xxxxxx</p>
      <p>xxxxxx</p>
      <p>xxxxxx</p>
      
      <MyLazyLoad placeholder={<div>loading...</div>}>
        <img src={img1}/>
      </MyLazyLoad>
      <LazyLoad placeholder={<div>loading...</div>}>
        <img src={img1}/>
      </LazyLoad>
      <LazyLoad placeholder={<div>loading...</div>}>
        <img src={img2}/>
      </LazyLoad>
      <LazyLoad placeholder={<div>loading...</div>}>
        <LazyComWrap />
      </LazyLoad>
    </div>
  );
};
